<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
    4. 什么是AJAX
AJAX 即Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 是与服务器交换数据并更新部分网页的艺术，并且是在不重新加载整个页面的情况下完成。
它并不是一种全新的技术，而是由JavaScript、XML、CSS等几种现有技术整合而成。Ajax的执行流程是先由用户界面触发事件调用JavaScript，通过Ajax引擎——XMLHttpRequest对象异步发送请求到服务器，服务器返回XML、JSON或者HTML等格式的数据，然后利用返回的数据使用DOM和CSS技术局部更新用户界面

7. Javscript/DOM/XML

Ajax技术包括以下关键内容：
  ○ JavaScript语言：Ajax技术的主要开发语言
    ■ JS是阻塞加载方式，但向服务器发起请求时使用ajax可以实现非阻塞。Javascript一直被定位为客户端的脚本语言，应用最多的地方就是表单数据的校验。现在，可以通过	  javascript操作XMLHttpRequest，来跟数据库打交道

  ○ XML/JSON/HTML等：用来封装请求或响应的数据格式
    ■ XML，是网上传输的数据，文档符合统一的标准。Xml可以很容易让所有程序共享,我们将使用的是JSON数据格式.

  ○ DOM（文档对象模型）：通过DOM属性或者方法修改页面元素，实现页面局部刷新
    ■ DOM(Document Object Model)是提供给Html和XML使用的一组API，提供了文件的表述结构，并可以利用它改变其中的内容。脚本语言通过DOM才可以跟页面进行交互。Web开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。比如，document就代表页面对象本身

  ○ CSS：改变样式，美化页面效果，提升用户体验

  ○ Ajax引擎：即XMLHttpRequest对象，以异步方式在客户端与服务器之间传递数据。

  使用ajax步骤如下:

1) 客户端事件发生，调用JavaScript函数编写的事件处理程序

2) 在事件处理程序中创建XMLHttpRequest对象

3) 配置XMLHttpRequest对象

4) XMLHttpRequest对象发送一个异步HTTP请求到服务器

5) 服务器程序接收请求，处理请求，返回相应

6) XMLHttpRequest对象调用callback()函数并处理结果

7) 更新HTML

$(document).ready()事件: 只要HTML页面中的HTML代码和JS代码加载完，就可以执行ready事件：
window.onload事件：网页所有的资源，HTML,CSS, JS, IMAGE,VIDE等所有资源加载完毕，才执行事件的触发。
   -->
  <h1>main页面</h1>
  <h3>权限管理</h3>
  <div>
    <form name="addForm">
      <div>权限名称：<input type="text" name="pname" class="pname"></div>
      <div>权限描述：<input type="text" name="pdes" class="pdes"></div>
      <div><button type="button" id="addBtn">添加</button></div>
    </form>
  </div>
  <div><input type="search" id="searchIpt" /><button type="button" id="searchBtn">搜索</button></div>
  <br>
  <br>
  <table border="1" width="100%">
    <thead>
      <tr>
        <th>
          <input type="checkbox">
        </th>
        <th>
          权限名称
        </th>
        <th>权限描述</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="accesslist">

    </tbody>

  </table>

  <script src="./../util/jquery-3.6.0.js"></script>
  <script>
    //添加权限：
    const addHandler = function () {
      let pname = $( ".pname" ).val();
      let pdes = $( ".pdes" ).val();
      if ( pname.trim() && pdes.trim() ) {
        $.ajax( {
          type: 'post',
          url: '/access/add',
          data: { pname, pdes },
          success ( res ) {
            console.log( res );
            if ( res.code === 0 ) {
              alert( res.msg )
              getAccessList()
              // $( ".pname" ).val( '' );
              // $( ".pdes" ).val( '' );
              $( "[name='addForm']" ).get( 0 ).reset();  // 重置表单
            } else {
              alert( res.msg )
            }
          }
        } )
      } else {
        alert( '必填' )
      }
    }
    $( "#addBtn" ).on( 'click', addHandler )

    // 事件委托：
    const deleteHandler = function () {
      // 1. 先判断有没有勾选, find(),找后代
      // console.log( $( this ).parents( 'tr' ).find( ":checkbox" ) )
      let checkboxIpt = $( this ).parents( 'tr' ).find( ":checkbox" )
      let isChecked = checkboxIpt.get( 0 ).checked
      // console.log( isChecked )  // 勾上:true,
      if ( !isChecked ) {
        alert( '删除前，请勾上要删除的对象' )
        return;
      }
      // 2. 拿ID
      let pid = $( this ).attr( 'data-id' );
      // console.log( pid )
      // 3. 发起AJAX请求：
      let xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if ( xhr.readyState === 4 && xhr.status === 200 ) {
          let res = JSON.parse( xhr.responseText );
          if ( res.code === 0 ) {
            // console.log( res )
            getAccessList() //4.重新调用函数，获取权限列表数据。
          } else {
            alert( res.msg )
          }
        }
      }
      xhr.open( "post", "/access/delAccess", true )
      xhr.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
      xhr.send( "acid=" + pid );

    }
    $( "#accesslist" ).on( "click", ".deleteBtn", deleteHandler )

    document.getElementById( "searchBtn" ).onclick = function () {
      let searchValue = document.getElementById( 'searchIpt' ).value;
      if ( searchValue.trim().length === 0 ) {
        return;
      }

      let xhr = new XMLHttpRequest();
      xhr.open( 'get', "/access/find?text=" + searchValue, true )
      xhr.send();
      xhr.onreadystatechange = function () {
        if ( xhr.readyState === 4 && xhr.status === 200 ) {
          let res = JSON.parse( xhr.responseText );
          if ( res.code === 0 ) {
            alert( res.msg )
            console.log( res );
            //....
          } else {
            alert( res.msg )
            //....
          }
        }
      }
    }
    window.onload = getAccessList;
    function getAccessList () {
      let token = sessionStorage.getItem( 'token' )
      console.log( token )
      // token传递： 1种像普通得参一样传递，如： "/access/getAccess？token="+token
      // 第2种： 添加在请求头中：
      let xhr = null;
      if ( window.XMLHttpRequest ) {
        xhr = new XMLHttpRequest();  // 非IE浏览器，现代浏览器的写法
      } else {
        xhr = new ActiveXObject( 'Microsoft.XMLHTTP' )  //  IE11/10/9/ 写法
      }


      xhr.open( 'get', "/access/getAccess", true )
      xhr.setRequestHeader( "token", token )  // 只能写在open之后，
      //  发送请求：
      xhr.send()

      xhr.onreadystatechange = function () {
        console.log( xhr.readyState )  // 2 3 4
        if ( xhr.readyState === 4 && xhr.status === 200 ) {
          console.log( xhr.responseText );// JSON字符串
          let res = JSON.parse( xhr.responseText )  // 转换成JSON对象  。  -》 JSON。stringify()
          // console.log( res )
          if ( res.code === 0 ) {
            // alert( res.msg )
            // 7. 更新页面。
            let arr = res.data;
            console.log( arr );
            let tbodyDom = document.getElementById( 'accesslist' );
            tbodyDom.innerHTML = '';
            // forEach(function(数组的元素， 索引下标， 数组的一个只读引用变量){})
            let strHtml = ""
            arr.forEach( function ( element, index, arr1 ) {
              // console.log( element )  // {数据}
              // console.log( index )  // 下标
              // console.log( arr1 )  // 别名
              strHtml += `<tr>
                            <td><input type="checkbox"></td>
                            <td>${ element.pname }</td>
                            <td>${ element.pdes }</td>
                            <td>
                              <button type="button">批量授权</button>
                              <button type="button" data-id=${ element.pid } class="deleteBtn">删除</button>
                            </td>
                          </tr>`;
            } )
            tbodyDom.innerHTML = strHtml;
          } else if ( res.code === 4005 ) {
            location.href = "/index.html"
          } else {
            alert( res.msg )
          }
        }
      }


      let userInfo = JSON.parse( sessionStorage.getItem( 'userinfo' ) )

      console.log( userInfo.uname );
    }
  </script>
</body>

</html>